<!-- 注册证详情组件（新） -->
<template>
  <div
    v-if="dialogVisible"
    class="new-registration-read">
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      title="产品信息"
      style="overflow: auto;"
      @close="handleClose"
    >
      <el-row
        style="overflow: auto;"
        :gutter="8">
        <el-col :span="12">
          <el-form>
            <template v-for="(item, index) in registrationForm">
              <el-form-item
                :label="item.label"
                :prop="item.prop"
                :key="index">
                <custom-tooltip :value="formatFormData(formData)[item.prop] ||'--'" />
                <!-- <span>: {{ formatFormData(formData)[item.prop] ||'--' }}</span> -->
              </el-form-item>
            </template>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-container class="new-registration-read-img-list">
            <div
              v-for="(item, index) in imageList"
              :key="index">
              <i
                style="width: 150px; height: 150px; padding-right: 8px;"
                v-if="!item.imageUrl"
                class="iconfont iconpdf"/>
              <div
                v-if="isPdf(item.imageUrl)"
                @click="toPreview(item.imageUrl)"
                :url="getSrc(item.imageUrl)">
                <el-image
                  style="width: 150px; height: 150px; padding-right: 8px;"
                  :src="getSrc(item.imageUrl)"
                  :fit="'contain'"/>
              </div>
              <div
                :ref="`viewer-${index}`"
                v-viewer
                v-else
                :url="getSrc(item.imageUrl)">
                <el-image
                  style="width: 150px; height: 150px; padding-right: 8px;"
                  :src="getSrc(item.imageUrl)"
                  :fit="'contain'"/>
              </div>
              <!-- <el-image
                style="width: 150px; height: 150px; padding-right: 8px;"
                :src="getSrc(item.imageUrl)"
                fit="cover"
                @click="toPreview(item.imageUrl)"/> -->
              <el-row>
                <el-col :span="12">
                  <el-button
                    type="text"
                    @click="toPreview(item.imageUrl, index)">预览</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button
                    type="text"
                    @click="toDownload(item.imageUrl)">下载</el-button>
                </el-col>
              </el-row>
            </div>
          </el-container>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'
import { formatDate } from '@const/filter'
// 定制化的tooltip
import CustomTooltip from '@components/custom-tooltip'
import { getCertificate } from '@const/productCenterApiV2'

const registrationForm = [
  { prop: 'certificateNo', label: '注册证编号：' },
  { prop: 'registrantName', label: '注册人名称：' },
  { prop: 'registrantAddress', label: '注册人住所：' },
  { prop: 'productionAddress', label: '生产地址：' },
  { prop: 'agentName', label: '代理人名称：' },
  { prop: 'agentAddress', label: '代理人住所：' },
  { prop: 'productNameCN', label: '产品名称：' },
  { prop: 'specification', label: '规格：' },
  { prop: 'structureComposition', label: '结构及组成：' },
  { prop: 'scopeUse', label: '适用范围：' },
  // {prop: 'dr', label: '其他内容'},
  { prop: 'remark', label: '备注：' },
  { prop: 'approvalDate', label: '批准日期：' },
  { prop: 'expireDate', label: '有效期至：' },
  // {prop: 'associationItems', label: '附件'},
  { prop: 'productStandards', label: '产品标准：' },
  { prop: 'changeDate', label: '变更日期：' }
]
export default {
  components: { ElEditable, CustomTooltip },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 注册证id
    cardId: {
      type: String,
      default: ''
    },
    // 注册证结构化数据
    cardData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: false,
      dialogVisible: this.visible,
      registrationForm,
      formData: this.cardData,
      pdfImg: require('@assets/img/pdf.png'),
      imageList: {
        type: Array,
        default: () => []
      }
    }
  },
  watch: {
    visible (val) {
      this.$nextTick(() => {
        this.dialogVisible = val
        val && this.getCardDetail()
      })
    }
  },
  methods: {
    // 查询注册证详情
    getCardDetail () {
      if (!this.cardId) {
        this.formData = this.cardData
        this.imageList = this.cardData ? (this.cardData.imageList || []) : []
        return false
      }
      this.$axios.$get(getCertificate, {
        params: {
          id: this.cardId
        }
      })
        .then(res => {
          this.formData = res.payload
          this.imageList = this.formData.imageList || []
        })
    },
    formatFormData () { // 可能需要处理一下接口数据，比如拼接多个字段为一个
      this.formData.productNameCN = this.formData.productNameCN || this.formData.productNameCn
      this.formData.certificateNo = this.formData.certificateNo || this.formData.registNo
      this.formData.expireDate = formatDate(this.formData.expireDate, 'YYYY-MM-DD')
      this.formData.approvalDate = formatDate(this.formData.approvalDate, 'YYYY-MM-DD')
      return this.formData
    },
    handleClose () {
      this.$emit('dialogClose', this.dialogVisible)
    },
    // 获取图片地址
    getSrc (url) {
      if (/\.pdf$/.test(url)) {
        return this.pdfImg
      }
      return url
    },
    // 获取图片地址
    isPdf (url) {
      return /\.pdf$/.test(url)
    },
    toPreview (url, index) {
      if (!this.isPdf(url)) {
        this.$refs[`viewer-${index}`][0].querySelector('img') && this.$refs[`viewer-${index}`][0].querySelector('img').click()
        return
      }
      this.$pdfViewer({
        url: url,
        title: '预览',
        isPrint: true
      })
    },
    toDownload (url) {
      window.open(url)
    }
  },
  mounted () {
    this.formData = this.cardData
    this.imageList = this.cardData ? (this.cardData.imageList || []) : []
  }
}
</script>
<style lang="less">
.new-registration-read-img-list {
  height: 800px;
  flex-wrap: wrap;
  // justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  & > div {
    text-align: center;
    width: 150px;
  }
}
</style>
